<template>
  <div>
    <el-row class="moveBlock">
      <el-col :span="24">
        <el-row class="topSearch">
          <el-col :span="24">
            <el-button>添加用户</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" height="500" border style="width: 100%">
          <el-table-column prop="num" label="序号" width="80"></el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            width="100">
          </el-table-column>

          <el-table-column
            prop="role"
            label="角色"
            width="100">
          </el-table-column>
          <el-table-column
            prop="realname"
            label="姓名"
            width="100">
          </el-table-column>

          <el-table-column
            prop="telephone"
            label="手机">
          </el-table-column>
          <el-table-column
            prop="department"
            label="部门">
          </el-table-column>
          <el-table-column
            label="操作"
            width="250"
          >
            <template scope="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)">修改密码
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

    </el-row>
  </div>

</template>

<script>
  export default {

    data() {
      return {
        queryParams: {
          roomCode: '',
          deviceType: '',
          complete: '',
          beginDate: '',
          endDate: '',
        },
        beginDate: '',
        endDate: '',
        deviceTypes: [],
        tableData: [],
      }
    },
    methods: {
        handleEdit(a,b){
            console.log(this.$route,this.$router)
            console.log(a,b)
        },

      /*以下三个函数全是输出ex表格*/
      exportServiceQuery(){
        this.export2Excel()
      },
      export2Excel() {
        require.ensure([], () => {
          const {export_json_to_excel} = require('../vendor/Export2Excel');
          const tHeader = ['序号', '房间号', '故障类型', '状态', '请求时间', '消除时间'];
          const filterVal = ['num', 'roomCode', 'deviceType', 'fixed', 'createTime', 'fixTime'];
          const list = this.tableData;
          /*表格内容*/
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '故障查询excel');
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    },

    mounted(){

    },
    beforeCreate(){
      this.$axios.get('/api/api/users').then((res) => {
        console.log('用户列表', res)
        if (res.data.success) {
          this.tableData = res.data.list.map((item, i) => {
            return {
              num: i + 1,
              username: item.username,
              role: item.role.name,
              realname: item.realname,
              department: item.department,
              telephone: item.telephone
            }
          });
        }
      })
    }

  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

</style>
